import React, { Component } from "react";
import { Form, Input, Table, Button, Divider, Row, Col } from "antd";
import Content from "../../components/Content";
import "./ScreeningLibrary.css";

const { Item } = Form;

const columns = [
  {
    title: "筛选菌株编号",
    key: "1",
    dataIndex: "strain_number",
    className: "strain_number"
  },
  {
    title: "菌株保藏编号",
    dataIndex: "other_numberme",
    className: "other_numberme"
  },
  {
    title: "新增分离菌株编号",
    dataIndex: "generic_name",
    className: "generic_name"
  },
  {
    title: "采集样品编号",
    dataIndex: "words",
    className: "words"
  },
  {
    title: "采集预处理方法",
    dataIndex: "strain_name",
    className: "strain_name"
  },
  {
    title: "菌种类别",
    dataIndex: "popular_name",
    className: "popular_name"
  },
  {
    title: "筛选菌株近源菌株",
    dataIndex: "habitat",
    className: "habitat"
  },
  {
    title: "筛选菌株序列",
    dataIndex: "potential_use",
    className: "potential_use"
  },
  {
    title: "操作",
    className: "operate",
    dataIndex: "",
    render: () => (
      <span>
        <a>查看</a>
        <Divider type="vertical" />
        <a>提交</a>
      </span>
    )
  }
];

const data = [];
for (let i = 0; i < 22; i++) {
  data.push({
    key: i,
    strain_number: `ACCC000${i}`,
    other_numberme: 666666666,
    generic_name: `属名 ${i}`,
    words: `种加词 ${i}`,
    strain_name: `学名 ${i}`,
    popular_name: `俗名 ${i}`,
    habitat: `成分 ${i}`,
    potential_use: `用途 ${i}`,
    operate: `London, Park Lane no. ${i}`
  });
}

class Query_mediumForm extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    selectedRowKeys: [], // Check here to configure the default column
    loading: false
  };

  start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);
  };

  onSelectChange = selectedRowKeys => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      }
    };
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };
    const hasSelected = selectedRowKeys.length > 0;

    return (
      <div class="content">
        <Form
          {...formItemLayout}
          onSubmit={this.onSubmit}
          colon={false}
          style={{ borderBottom: "20px solid #f0f2f5" }}
        >
          <div style={{ display: "flex" }}>
            <span style={{ flex: 1 }}>
              <Item label="筛选菌株编号">
                {getFieldDecorator("aaa11")(<Input />)}
              </Item>
              <Item label="菌株保藏编号">
                {getFieldDecorator("aaa12")(<Input />)}
              </Item>
              <Item label="新增分离菌株编号">
                {getFieldDecorator("aa3a1")(<Input />)}
              </Item>
              <Item label="采集样品编号">
                {getFieldDecorator("aaa41")(<Input />)}
              </Item>
              <Item label="采集样品预处理方法">
                {getFieldDecorator("a5aa1")(<Input />)}
              </Item>
            </span>
            <span style={{ flex: 1 }}>
              <Item label="菌种类别">
                {getFieldDecorator("aa6a1")(<Input />)}
              </Item>
              <Item label="筛选菌株近缘菌株">
                {getFieldDecorator("aa7a1")(<Input />)}
              </Item>
              <Item label="需氧类型">
                {getFieldDecorator("aa8a1")(<Input />)}
              </Item>
              <Item label="分离培养基编号">
                {getFieldDecorator("aa9a1")(<Input />)}
              </Item>
              <Item label="传代培养基编号">
                {getFieldDecorator("aa0a1")(<Input />)}
              </Item>
            </span>
            <span style={{ flex: 1 }}>
              <Item label="培养温度">
                {getFieldDecorator("aaqa1")(<Input />)}
              </Item>
              <Item label="培养周期">
                {getFieldDecorator("aawa1")(<Input />)}
              </Item>
              <Item label="菌落描述">
                {getFieldDecorator("aeaa1")(<Input />)}
              </Item>
              <Item label="菌落图片">
                {getFieldDecorator("aara1")(<Input />)}
              </Item>
              <Item label="正面颜色">
                {getFieldDecorator("aaat1")(<Input />)}
              </Item>
            </span>
            <span style={{ flex: 1 }}>
              <Item label="反面颜色">
                {getFieldDecorator("aaay1")(<Input />)}
              </Item>
              <Item label="孢子有无">
                {getFieldDecorator("aaua1")(<Input />)}
              </Item>
              <Item label="是否产色素">
                {getFieldDecorator("iaaa1")(<Input />)}
              </Item>
              <Item label="分离人">
                {getFieldDecorator("aaoa1")(<Input />)}
              </Item>
              <Item label="分离时间">
                {getFieldDecorator("aapa1")(<Input />)}
              </Item>
            </span>
            </div>
            <Item wrapperCol={{ span: 10, offset: 2 }}>
          <Row guuter={16}>
            <Col span={5}>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Col>
            <Col span={5}>
              <Button type="primary">取消</Button>
            </Col>
          </Row>
        </Item>
          </Form>
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={data}
          bordered
          style={{ marginLeft: 12 }}
        />
      </div>
    );
  }
}
const WrapperedQuery_mediumForm = Form.create({
  name: "query medium"
})(Query_mediumForm);

class ScreeningSaveQuery extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedQuery_mediumForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default ScreeningSaveQuery;
